<template>
  <div style="width: 100%;height: 100%;overflow:hidden;padding-top: 3rem">
    <div style="position: absolute;width: 100%; top: 0;z-index: 2">
      <top-header :title=" '商品分类' " :hasTitle="true" :hasList="true" :hasCart="true"></top-header>
    </div>
    <div style="width: 100%;height: 100%">
      <vertical-scroll>
        <div>
          <!--图片展示div-->
          <div class="aui-slide-node" style="height: 6.75rem;overflow: hidden">
            <img src="static/image/classify/banner.jpg"/>
          </div>
          <!--表格div-->
          <div class="classification">
            <div class="aui-row">
              <router-link tag="div"
                           :to="{path:'goodsclassify',query:{'classCode':item.classCode|| item.goodsclasscode}}"
                           v-if="classifyData && classifyData.length> 0" class="aui-col-xs-4"
                           v-for="(item, index) in classifyData" :key="index">
                <div class="cjy-pic-outer"
                     style="">
                  <img style="position:absolute" :src="item.imageUrl||item.imgurl|| 'static/image/demo2.png' "/>
                </div>
                <div class="aui-grid-label" style="padding-top: 0.3rem">{{item.className || item.goodsclassname}}</div>
              </router-link>
            </div>
          </div>

          <div v-show="classifyData && classifyData.length <= 0" class="centent" style="">
            <div class="no_data">
              <img src="static/image/no_order.png" style="width:70%;">
              <p>暂无相关数据</p>
            </div>
          </div>
        </div>
      </vertical-scroll>
    </div>
  </div>
</template>

<script>
  import TopHeader from '../header'
  import VerticalScroll from '@/real-components/VerticalScroll'

  import {mapGetters, mapMutations} from "vuex";

  export default {
    data() {
      return {}
    },
    beforeCreate() {
      //获取分类列表
      if (!this.$store.getters['cjy/newClassifyData']) {
        this.$store.dispatch('cjy/queryNewClassifyList');
      }
    },
    components: {TopHeader, VerticalScroll},
    methods: {},
    computed: {
      classifyData() {
        return this.$store.getters['cjy/newClassifyData'];
      }
    },
    beforeRouteLeave(to, from, next) {
      var name = from.name;
      this.$store.commit('cjy/SET_RETURN_POS', name);
      next();
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style>
  .cjy-pic-outer {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow-x: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative
  }

  .aui-grid-label {
    height: 1.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
